iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 18
1
Modern Web

高效 Coding 術:Angular Schematics 實戰三十天系列 第 18

[高效 Coding 術:Angular Schematics 實戰三十天] Day17 - 打包與發佈

  • 分享至 

  • xImage
  •  

當已經開發完自己的 Schematics 或是 Package 之後,最讓人期待跟興奮的事情就是將他公開到 npm 上讓大家使用!

對於這件事情,其實大家不要覺得有太大的壓力,因為我們每個人其實都是站在別人的肩膀上,科技才有今天的進步。我們會拿別人造好的輪子來用,也會造輪子給別人用,大家不斷地彼此反饋、推動彼此進步。正因為這樣,我們如今才有這麼多資源可以使用,各種套件、軟體、程式語言如雨後春筍般地不斷推陳出新,百家爭鳴、百花齊放,好不熱鬧。

筆者廢話好像說太多了,接下來就來看看要怎麼打包與發佈我們的 Package 吧!

事前準備

在要打包或是發佈之前,我們可以先把專案內的 package.json 裡的資訊都準備好,像是 nameversiondescriptionkeywordsrepositoryauthorlicense ,甚至是 README.md 也可以斟酌撰寫。

一部分是因為要增加別人搜尋到你的 Package 的機會,另一部分則是會因為有足夠的資訊判斷這個 Package 是誰開發,有興趣的人就自然會去看你的 Repository ,給你更多的建議等等。

關於 package.json ,如果想知道更多的細節,可以參考官方文件的說明。

.npmignore

.npmignore 這個檔案跟 .gitignore 有點類似,在 .gitignore 裡是不追蹤符合條件的檔案, .npmignore 則是在打包時會把符合條件的檔案給濾掉。

舉例來說:

# Ignores TypeScript files, but keeps definitions.
*.ts
!*.d.ts

上述的設定,會讓 npm 在打包或發佈時,把除了 .d.ts 之外的所有 .ts 都濾掉,因為實際應用時用不到。

所以我們在這裡就要特別留意,因為我們的 Schematic 所用到的範本檔,很可能剛好就是 .ts 的檔案,因此會在打包或發佈時,被 npm 過濾掉。

這時有兩種解法:

  • 移除 .npmignore 裡的 *.ts
  • 調整範本檔案命名。

第一種解法最簡單,缺點是會有不必要的檔案如 index.tsindex_spec.ts 出現。

第二種解法較麻煩了點,不過也只是相對於第一種解法而已。像 Angular 官方就是採用第二種方式處理,他們的範本檔是在 .ts 之後再加上 .template 作為結尾,然後在程式裡再使用 applyTemplates 這個函式來將其移除。

例如原本的程式碼會長的像這樣:

const sourceTemplates = url('./files');
const sourceParametrizedTemplates = apply(sourceTemplates, [
  template({
    ..._options,
    ...strings,
    name
  }),
  move(path)
]);

而範本如果加了 .template 當結尾後,就將 template 函式改為使用 applyTemplates 函式:

const sourceTemplates = url('./files');
const sourceParametrizedTemplates = apply(sourceTemplates, [
  applyTemplates({
    ..._options,
    ...strings,
    name
  }),
  move(path)
]);

是不是其實也很簡單?!

打包

在發佈前,其實我們可以透過打包來測試發佈後安裝的效果,當然如果不想要發佈永遠都這樣用也是可以啦,只是正常來說不會這樣做。

首先先用 npm run build 編譯完檔案後,就可以在終端機中輸入 npm pack 來將我們的程式碼打包成一個 .tgz 檔。

而這個 .tgz 的檔名格式是:{name}-{version}.tgz ,例如我這個系列文的專案所打包出來的 .tgz 檔,檔名就叫做 schematics30-0.1.0.tgz

打包完之後,我們就可以直接將這個 .tgz 檔丟到任何有用 npm 的專案裡,然後輸入以下指令來安裝:

npm i --no-save schematics30-0.1.0.tgz
ng g schematics30:hello-world feature/leo-chen

發佈

萬事具備後,我們就可以來發佈自己的 Package 囉!

如果之前沒有發佈過自己的 Package 的話,要先到 npm 的網站註冊

Imgur

註冊完成後,會收到驗證信:

Imgur

注意,務必完成信箱驗證才能發佈。

驗證完信箱後,開啟終端機並輸入:

npm adduser

接著他會要求輸入你剛剛註冊的帳號、密碼與信箱,輸入完按確定後,會出現 Logged in as XXXXX 的提示:

Imgur

這時表示你之後如果有發佈任何的 Package 時,都會使用這個帳號去發佈。

如果之前已經有設定過的話,可以直接忽略以上步驟。

相關資料會記錄在 ~/.npmrc 裡。

設定完成後,在專案根目錄下輸入:

npm publish

就可以成功發佈自己的 Package 了:

Imgur

如果我們有誤發或是特別情況時,可以在發佈後的 72 小時內可以使用以下指令來取消發佈或刪除特定版本:

取消發佈:

npm unpublish <package_name> -f

刪除特定版本:

npm unpublish <package_name>@<version>

本日結語

筆者覺得,當做完自己的東西並且發佈之後,從中獲得的成就感就像是自己將一個小孩養大之後讓他展翅飛翔一樣!

明天筆者要分享的是,如何將 Schematics 直接整合到現有的 Angular 專案內。

敬請期待!

參考資料


上一篇
[高效 Coding 術:Angular Schematics 實戰三十天] Day16 - 實戰 ng update
下一篇
[高效 Coding 術:Angular Schematics 實戰三十天] Day18 - 將 Schematics 整合進你的 Angular 專案裡
系列文
高效 Coding 術:Angular Schematics 實戰三十天32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言